<template>
  <el-dialog title="选择标签" :visible.sync="localOpen" width="800px" :close-on-click-modal="true" @close="cancel"
    append-to-body>
    <div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="queryParams.tagName" placeholder="请输入标签名称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table ref="selectTagTable" v-loading="loading" :data="tagList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="标签名称" align="center" prop="tagName" />
        <el-table-column label="添加时间" align="center" prop="gmtCreate" width="180">
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="selectData">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import store from "@/store";
  import {
    listTag
  } from "@/api/bus_web/thesaurus/tag";

  export default {
    name: "SelectTag",
    props: {
      open: Boolean
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 标签管理表格数据
        tagList: [],
        localOpen: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          tagName: null,
        }
      };
    },
    computed: {
      ...mapState({
        tag: state => state.selectTag.tag,
        tagSelectModel: state => state.selectTag.tagSelectModel,
      })
    },
    watch: {
      open(newValue, oldValue) {
        this.localOpen = newValue; // 同步父组件的 open 值到本地状态
      },
      localOpen(newValue) {
        if (newValue) {
          this.getList() // 当本地状态变为 false 时，通知父组件
        } else {
          this.cancel()
        }
      }
    },
    methods: {
      /** 查询标签管理列表 */
      getList() {
        this.loading = true;
        listTag(this.queryParams).then(response => {
          this.tagList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.queryParams= {
          pageNum: 1,
          pageSize: 10,
          tagName: null,
        }
        this.$emit('close-select-window');
      },
          /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        if(selection.length>1 && this.wordSelectModel==2){
          selection=[]
          this.$refs.selectTagTable.clearSelection()
          this.$store.dispatch('selectTag/cleanTagData')
          this.$modal.msgError("最多只能选择1条数据")
          return
        }
        selection.map(item => {
          this.$store.dispatch('selectTag/setTag', item)
        })
      }
      ,
      //确定选择数据
      selectData() {
        if (this.tag.length < 1) {
          this.$modal.msgError("请至少选中1条数据")
          return
        }
        this.$emit('selected-data')
      }
    }
  };
</script>
